<template>
	<div class="mainContent">
		<pathTracking :path="Model.path" />
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
				<el-tab-pane label="售后订单详情" name="1"></el-tab-pane>
				<el-tab-pane label="赠品管理" name="2"></el-tab-pane>
				<el-tab-pane label="支付记录" name="3"></el-tab-pane>
				<el-tab-pane label="操作日志" name="4"></el-tab-pane>
			</el-tabs>
			<div class="tabBox">
				<div class="tabBoxHead" >
					<p class="tabBoxHeadBtn" @click="onApproval" v-show="Model.aftersaleStatus == 21||Model.aftersaleStatus == 28||Model.aftersaleStatus == 36">审核</p>
					<p class="tabBoxHeadBtn" @click="onAddAfterSoleCost" v-show="Model.aftersaleStatus == 23||Model.aftersaleStatus == 31||Model.aftersaleStatus == 38">添加售后费用</p>

				</div>
				<el-row class="detailTable">
					<el-form :inline="true">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tabFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<div class="tabBoxStep">
					<el-steps :active="Model.refundStep.activeStep">
						<el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.refundStep.step" :key="index"></el-step>
					</el-steps>
				</div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<span class="detailTableImgSmall"></span>
						<p class="text">订单变更单信息</p>
						<img class="detailTableImgNormal" src="@/assets/img/icon_edit.png" @click="onDialogEdit(true,'tableFormInline')">
						<img class="detailTableImgNormal" :src="Model.detailTableFrom.src" alt="" @click="toggleTableDetail('detailTableFrom')">

					</div>
					<el-form :inline="true" v-show="Model.detailTableFrom.flag">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<div v-show="Model.activeTab==1">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<span class="detailTableImgSmall"></span>
							<p class="text">订单明细</p>
							<img class="detailTableImgNormal" :src="Model.tab1TableDetail1.src" alt="" @click="toggleTableDetail('tab1TableDetail1')">
							<!-- <img class="detailTableImgNormal" src="@/assets/img/icon_unfold.png" alt="" v-show="Model.tab1TableDetail1"> -->
						</div>
						<div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
							<el-table :data="Model.tableData" border style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
								<el-table-column type="index" width="50" label="序号" fixed></el-table-column>
								<el-table-column prop="customNumber" label="定制编号" width="100"></el-table-column>
								<el-table-column prop="goodType" label="产品类型" width="120"></el-table-column>
								<el-table-column prop="category" label="品类" width="120"></el-table-column>
								<el-table-column prop="description">
									<template slot="header" slot-scope="scope">
										<el-tooltip content="钻石信息顺序:颜色-净度-切工-抛光-对称-荧光" placement="top">
											<span class="iconQuestionmark">描述</span>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="lettering" label="刻字" width="120"></el-table-column>
								<el-table-column prop="deliveryTime" label="预计交期" width="200"></el-table-column>
								<el-table-column prop="price" label="价格" width="120"></el-table-column>
								<el-table-column prop="specialCustom" label="特殊定制要求" width="120"></el-table-column>
								<el-table-column prop="remark" label="备注" width="120"></el-table-column>
								<el-table-column prop="mainCount" label="主数量" width="120"></el-table-column>
								<el-table-column fixed="right" :label="$t('common.handleOption')" width="150">
									<template slot-scope="scope">
										<div class="btnGroup">
											<div class="operate-btn" @click="onOrderChange(scope.row)" v-if="(Model.aftersaleStatus != 21 && Model.aftersaleStatus != 28 && Model.aftersaleStatus != 36) && scope.$index+1 == Model.tableData.length">发起变更</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-row>
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<span class="detailTableImgSmall"></span>
							<p class="text">其他信息修改</p>
						</div>
						<el-form :inline="true">
							<el-col>
								<el-form-item label="收货日期修改：">{{Model.expectReceiveTimeChange}}</el-form-item>
							</el-col>
						</el-form>
					</el-row>
				</div>
				<div v-show="Model.activeTab==2">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<span class="detailTableImgSmall"></span>
							<p class="text">附赠品列表</p>
							<img class="detailTableImgNormal" :src="Model.tab2TableDetail1.src" alt="" @click="toggleTableDetail('tab2TableDetail1')">

						</div>
						<div class="formInline">
							<el-form :inline="true" class="demo-form-inline">
								<el-form-item label="特殊申请赠品原因">:{{'活动需要'}}</el-form-item>
							</el-form>
						</div>
						<div class="detailTableDetail" v-show="Model.tab2TableDetail1.flag">
							<el-table :data="Model.saleOrderGiftsList" border show-summary style="width: 100%;max-height:550px"
							 @selection-change="handleSelectionChange">
								<el-table-column type="index" width="50" label="序号" fixed></el-table-column>
								<el-table-column prop="giftNumber" label="附赠品编号"></el-table-column>
								<el-table-column prop="giftName" label="附赠品名称"></el-table-column>
								<el-table-column prop="createTime" label="添加赠品时间"></el-table-column>
								<el-table-column prop="count" label="数量"></el-table-column>
								<el-table-column fixed="right" :label="$t('common.handleOption')" width="120">
									<template slot-scope="scope">
										<div class="btnGroup">
											<div class="operate-btn" @click="deleteOrderGifts(scope.row.id)">删除</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="detailTableItemTitle">
							<span class="detailTableImgSmall"></span>
							<p class="text">附赠品收货地址</p>
							<img class="detailTableImgNormal" :src="Model.tab2TableDetail2.src" alt="" @click="toggleTableDetail('tab2TableDetail2')">

						</div>
						<div class="detailTableDetail" v-show="Model.tab2TableDetail2.flag">
							<el-table :data="Model.saleOrderGiftsList.length>0?[Model.saleOrderGiftsList[0].saleReceivingGoods]:[]" border
							 show-summary style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
								<el-table-column prop="recipientName" label="收件人姓名"></el-table-column>
								<el-table-column prop="recipientPhone" label="联系电话"></el-table-column>
								<el-table-column prop="detailedAddress" label="收件人地址"></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<div v-show="Model.activeTab==3">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<span class="detailTableImgSmall"></span>
							<p class="text">收款记录</p>
							<img class="detailTableImgNormal" :src="Model.tab3TableDetail1.src" alt="" @click="toggleTableDetail('tab3TableDetail1')">

						</div>
						<div class="detailTableDetail" v-show="Model.tab3TableDetail1.flag">
							<el-table :data="Model.saleOrderPayList" border show-summary style="width: 100%;max-height:550px"
							 @selection-change="handleSelectionChange">
								<el-table-column prop="serialNumber" label="支付流水号" width="100"></el-table-column>
								<el-table-column prop="paymentMethod" label="支付方式" width="120"></el-table-column>
								<el-table-column prop="payMoney" label="支付金额" width="120"></el-table-column>
								<el-table-column prop="createTime" label="支付时间" width="120"></el-table-column>
								<el-table-column prop="createBy" label="操作人" width="120"></el-table-column>
								<el-table-column prop="status" label="财务确认" width="120"></el-table-column>
								<el-table-column prop="account" label="收款账户"></el-table-column>
							</el-table>
						</div>
						<div class="detailTableItemTitle">
							<span class="detailTableImgSmall"></span>
							<p class="text">退款记录</p>
							<img class="detailTableImgNormal" :src="Model.tab3TableDetail2.src" alt="" @click="toggleTableDetail('tab3TableDetail2')">

						</div>
						<div class="detailTableDetail" v-show="Model.tab3TableDetail2.flag">
							<el-table :data="Model.refundList" border show-summary style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
								<el-table-column prop="serialNumber" label="退款流水号" width="100"></el-table-column>
								<el-table-column prop="account" label="退款账号" width="120"></el-table-column>
								<el-table-column prop="bankDeposit" label="开户行" width="120"></el-table-column>
								<el-table-column prop="bankName" label="开户人姓名" width="120"></el-table-column>
								<el-table-column prop="payMoney" label="退款金额" width="120"></el-table-column>
								<el-table-column prop="createTime" label="退款操作时间" width="200"></el-table-column>
								<el-table-column prop="createBy" label="操作人" width="120"></el-table-column>
								<el-table-column prop="status" label="财务确认"></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<div v-show="Model.activeTab==4">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<span class="detailTableImgSmall"></span>
							<p class="text">订单操作日志</p>
							<img class="detailTableImgNormal" :src="Model.tab4TableDetail1.src" alt="" @click="toggleTableDetail('tab4TableDetail1')">

						</div>
						<div class="detailTableDetail" v-show="Model.tab4TableDetail1.flag">
							<el-table :data="Model.saleLogList" border show-summary style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
								<el-table-column prop="createTime" label="时间"></el-table-column>
								<el-table-column prop="type" label="操作类型"></el-table-column>
								<el-table-column prop="createBy" label="操作人"></el-table-column>
								<el-table-column prop="record" label="操作记录"></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>

			</div>
		</div>
		<!-- 弹框 -->
		<el-dialog :visible.sync="Model.editDialogFlag" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">编辑</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<div class="editDialogItem">
					<div class="editDialogLeftLabel">
						<span class="editDialogRequire">*</span>配送类型：
					</div>
					<div class="editDialogRightText">
						<el-select v-model="Model.editDialogFormData.shippingMethod" placeholder="请选择" size="small">
							<el-option label="自提" value="1"></el-option>
							<el-option label="快递" value="0"></el-option>
						</el-select>
					</div>
				</div>
				<div class="editDialogItem" v-show="Model.editDialogFormData.shippingMethod=='1'">
					<div class="editDialogLeftLabel">
						<span class="editDialogRequire">*</span>发货门店：
					</div>
					<div class="editDialogRightText">
						<el-select v-model="Model.editDialogFormData.shipper" placeholder="请选择" size="small">
							<el-option label="天猫" value="0"></el-option>
							<el-option label="京东" value="1"></el-option>
						</el-select>
					</div>
				</div>
				<div class="editDialogItem">
					<div class="editDialogLeftLabel">
						<span class="editDialogRequire">*</span>销售来源：
					</div>
					<div class="editDialogRightText">
						<el-select v-model="Model.editDialogFormData.originChannel" placeholder="请选择" size="small">
							<el-option label="dr1002" value="0"></el-option>
							<el-option label="dr2003" value="1"></el-option>
						</el-select>
					</div>
				</div>
				<div class="editDialogItem">
					<div class="editDialogLeftLabel">
						<span class="editDialogRequire">*</span>销售员：
					</div>
					<div class="editDialogRightText">
						<el-select v-model="Model.editDialogFormData.salesman" placeholder="请选择" size="small">
							<el-option label="张三" value="0"></el-option>
							<el-option label="李四" value="1"></el-option>
						</el-select>
					</div>
				</div>
				<div class="editDialogItem" v-show="Model.editDialogFormData.shippingMethod=='0'">
					<div class="editDialogLeftLabel">
						是否新建地址：
					</div>
					<div class="editDialogRightText">
						<el-radio-group v-model="Model.editDialogNewAddress" @change="changeAddress">
							<el-radio :label="true">是</el-radio>
							<el-radio :label="false">否</el-radio>
						</el-radio-group>
					</div>
				</div>
				<div class="editDialogItem" v-show="Model.editDialogNewAddress==false&&Model.editDialogFormData.shippingMethod=='0'">
					<div class="editDialogLeftLabel">
						请选择地址：
					</div>
					<div class="editDialogItemAddressBox">
						<div v-if="Model.addressList.length==0">
							暂无历史地址
						</div>
						<div class="editDialogItemAddressBoxInfo" v-for="(item,index) in Model.addressList" :key="index">
							<div>
								<span>

									<el-radio v-model="Model.editDialogItemAddressBoxRadio" :label="index">{{item.name}}</el-radio>

								</span>
								<span>{{item.phone}}</span>
							</div>
							<div>
								{{item.address}}
							</div>
						</div>
					</div>
				</div>

				<div v-if="Model.editDialogNewAddress&&Model.editDialogFormData.shippingMethod=='0'">
					<div class="editDialogItem">
						<div class="editDialogLeftLabel">
							<span class="editDialogRequire">*</span>收件人姓名：
						</div>
						<div class="editDialogRightText">
							<el-input size="small" v-model="Model.editDialogFormData.recipientName" placeholder="请输入内容"></el-input>
						</div>
					</div>
					<div class="editDialogItem">
						<div class="editDialogLeftLabel">
							<span class="editDialogRequire">*</span>收件人手机号：
						</div>
						<div class="editDialogRightText">
							<el-input size="small" v-model="Model.editDialogFormData.recipientPhone" placeholder="请输入内容"></el-input>
						</div>
					</div>
					<div class="editDialogItem">
						<div class="editDialogLeftLabel">
							<span class="editDialogRequire">*</span>短信通知手机：
						</div>
						<div class="editDialogRightText">
							<el-input size="small" v-model="Model.editDialogFormData.messagePhone" placeholder="请输入内容"></el-input>
						</div>
					</div>
					<div class="editDialogItem">
						<div class="editDialogLeftLabel">
							收货地址类型：
						</div>
						<div class="editDialogRightText">
							<el-radio-group v-model="Model.editDialogFormData.addressType">
								<el-radio label="大陆" value="0"></el-radio>
								<el-radio label="海外" value="1"></el-radio>
							</el-radio-group>
						</div>
					</div>
					<div class="editDialogItem">
						<div class="editDialogLeftLabel">
							<span class="editDialogRequire">*</span>收货人所在地区：
						</div>
						<div class="editDialogRightText">
							<el-input size="small" v-model="Model.editDialogFormData.location" placeholder="请输入内容"></el-input>
						</div>
					</div>
					<div class="editDialogItem">
						<div class="editDialogLeftLabel">
							<span class="editDialogRequire">*</span>收货人详细地址：
						</div>
						<div class="editDialogRightText">
							<el-input size="small" v-model="Model.editDialogFormData.detailedAddress" placeholder="请输入内容"></el-input>
						</div>
					</div>
				</div>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="updateBaseSaleOrder">
						保存
					</div>
					<div class="viewDialogFooterCancel" @click="onDialogEdit(false,'tableFormInline')">
						取消
					</div>
				</div>
			</div>
		</el-dialog>
		<!-- 添加售后费用弹框 -->
		<el-dialog :visible.sync="Model.addCostDialogFlag" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">添加售后费用</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<div class="editDialogItem" v-for="(item,index) in Model.editDialogItemOption" :key="index">
					<div class="editDialogLeftLabel">{{item.saleAfterType}}：</div>
					<div class="editDialogRightText" v-if="item.chooseType==1">
						<el-radio-group v-model="item.choose">
							<el-radio :label="false">否</el-radio>
							<el-radio :label="true">是</el-radio>
						</el-radio-group>
					</div>
					<div class="editDialogRightText" v-else-if="item.chooseType==2">
						<el-input v-model="item.lostCount"></el-input>
					</div>
				</div>
				
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="onSaveAfterSoleCost">保存</div>
					<div class="viewDialogFooterCancel" @click="Model.addCostDialogFlag=false">取消</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
	@import "./index.less";
</style>
